import { useState, useEffect } from "react";
import { Select, Spin } from "antd";
import type { SelectProps } from "antd";


const options: SelectProps["options"] = [];

for (let i = 10; i < 36; i++) {
  options.push({
    value: i.toString(36) + i,
    label: i.toString(36) + i,
  });
}

const handleChange = (value: string | string[]) => {
  console.log(`Selected: ${value}`);
};

const RealTimeChart = () => {

  const [isSelectLoading, setSelectLoading] = useState(true)

  setTimeout(() => {
    setSelectLoading(false)
  }, 1500)

  return <div>
    <div>
        <Spin style={{margin:"8px"}} spinning={isSelectLoading}></Spin>
        连接中...
    </div>
    <Select
          mode="multiple"
          size="middle"
          loading={isSelectLoading}
          placeholder="Please select"
          defaultValue={['a10', 'c12']}
          onChange={handleChange}
          style={{ width: '100%' }}
          options={options}
        />
  </div>
  
}

export default RealTimeChart
